<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    html,body{
        width: 100%;
        height: 100%;
        background:#0A0F23;
    }
    *{
        margin: 0;
        padding: 0;
    }
</style>
<body>
<div id="vbarChart" style="width:100%;height:100%;"></div>
<script src="../../components/echarts-4.0.4.min.js"></script>
<script>
        var vbarChart = echarts.init(document.getElementById('vbarChart'));


        var barOption = {
		    title: {
		        text: '高等院校仪器共享 TOP5',
				left:'center',
		        top: "5%",
				textStyle: {
                    color: '#fff',
                    fontSize: 22
                }
		      },
		    tooltip: {
		        trigger: 'item',
		        formatter: "{a} <br/>{b} : {c}%"
		    },
		   /* legend: {
		        data: ['中国电子科技集团第二十研究所','西安交通大学','西安富士达科技股份有限公司','西部金属材料股份有限公司','西安万隆制药有限公司'],
		        left:'0',
		        bottom:'5%',
		        orient: 'vertical',
		        textStyle: {
		          color: '#fff',
		          fontSize: 16
		        }
		    },*/
		    color: ['#0179c4','#0097db','#00a3ac','#029f85','#009f5c','#81bd41','#f44a4a','#ed5f05', '#f29806', '#fdc901','#fdf100','#c0d528'],
		    series: [
		        {
		            name: '预期',
		            type: 'funnel',
		            left: '3%',
		            right:'5%',
		            top:'18%',
		            bottom:'5%',
		            width: '55%',
		            label: {
		            	show:false,
		                normal: {
		                    formatter: '{b}',
		                    textStyle: {
					          color: '#fff',
					          fontSize: 16
					        }
		                },
		                emphasis: {
		                    position:'inside',
		                    formatter: '{b}',
		                    textStyle: {
					          color: '#fff',
					          fontSize: 16
					        }
		                }
		            },
		            labelLine: {
		                normal: {
		                    show: false
		                }
		            },
		            itemStyle: {
		                normal: {
		                    opacity: 0.7
		                }
		            },
		            data: [
		                {value: 1000, name: '西安交通大学'},
		                {value: 800, name: '西北大学'},
		                {value: 600, name: '第四军医大学'},
		                {value: 400, name: '西北工业大学'},
		                {value: 200, name: '陕西师范大学'}
		            ]
		        },
		        {
		            name: '实际',
		            type: 'funnel',
		            left: '3%',
		            top:'18%',
		            right:'5%',
		            bottom:'5%',
		            width: '55%',
		            maxSize: '55%',
		            label: {
		                normal: {
		                    position: 'inside',
		                    formatter: '{c}',
		                    textStyle: {
		                        color: '#fff',
		                        fontSize: 18
		                    }
		                },
		                emphasis: {
		                    position:'inside',
		                    formatter: '{b}实际: {c}%'
		                }
		            },
		            itemStyle: {
		                normal: {
		                    opacity: 0.5,
		                    borderColor: '#fff',
		                    borderWidth: 2
		                }
		            },
		            data: [
		                {value: 877, name: '西安交通大学'},
		                {value: 620, name: '西北大学'},
		                {value: 247, name: '第四军医大学'},
		                {value: 370, name: '西北工业大学'},
		                {value: 170, name: '陕西师范大学'}
		            ]
		        }
		    ]
		};

        vbarChart.setOption(barOption);
    </script>
</body>
</html>